<cp-navbar (onClickLeft)="onClickLeft()"></cp-navbar>
<div class="container">
  <div class="gutter"></div>
  <div class="common-cell">
    <div class="item border-bottom">
      <div class="left">房价总额</div>
      <div class="right">
        <div class="right-input">
            <InputItem [type]="'money'"
            [placeholder]= "'100'"
            [clear]="true"
            (onChange)="inputClick($event)"
            (onBlur)="omblurInput()"
            ></InputItem>
            <p>万</p>
        </div>
        

      </div>
    </div>
    <div class="item">
      <div class="left">首付选择</div>
      <div class="right">
        <div class="shoufu">
            <ListItem Picker
            [extra]="name1"
            [arrow]="'horizontal'"
            [data]="singleArea1"
            [(ngModel)]="value1"
            (ngModelChange)="onOk1($event)">   
                      
            </ListItem>
        </div>   

      </div>
    </div>
  </div>
  <div class="common-cell">
    <div class="item">
      <div class="left">贷款方式</div>
      <div class="right">
        <div class="shoufu">
            <ListItem Picker
            [extra]="name2"
            [arrow]="'horizontal'"
            [data]="singleArea2"
            [(ngModel)]="value2"
            (ngModelChange)="onOk2($event)">
            </ListItem>
        </div> 
      </div>
    </div>
  </div>
  <p class="surplus1">贷款总额{{loanCeiling}}</p>
 
    <div class="common-cell">
        <!-- 商业贷款栏 -->
        <section *ngIf="isshowbusiness">
            <div class="item border-bottom">
            <div class="left">商业贷款</div>
            <div class="right">
                <div class="shoufu">
                    <ListItem Picker
                    [extra]="name3"
                    [arrow]="'horizontal'"
                    [cascade]="true"
                    [data]="singleArea3"
                    [title]="'选择商业贷款年限'"
                    [disabled] = "isdisabled3"
                    [(ngModel)]="value3"
                    (ngModelChange)="onOk3($event)">
                    </ListItem>
                </div>
            </div>
            </div>
            <div class="item border-bottom">
            <div class="left">商贷利率</div>
            <div class="right">
                <div class="shoufu">
                    <ListItem Picker
                    [extra]="name4"
                    [arrow]="'horizontal'"
                    [data]="singleArea4"
                    [(ngModel)]="value4"
                    (ngModelChange)="onOk4($event)">
                    </ListItem>
                </div>
            </div>
            </div>
        </section>
        <!-- 公积金贷款栏 -->
        <section *ngIf="isshowggj">
            <div class="item border-bottom">
            <div class="left">公积金贷款</div>
            <div class="right">
                <div class="shoufu">
                    <ListItem Picker
                    [extra]="name5"
                    [arrow]="'horizontal'"
                    [cascade]="true"
                    [data]="singleArea5"
                    [title]="'选择公积金贷款年限'"
                    [disabled] = "isdisabled5"
                    [(ngModel)]="value5"
                    (ngModelChange)="onOk5($event)">
                    </ListItem>
                </div>
            </div>
            </div>
            <div class="item">
            <div class="left">公积金利率</div>
            <div class="right">
                <div class="shoufu">
                    <ListItem Picker
                    [extra]="name6"
                    [arrow]="'horizontal'"
                    [data]="singleArea6"
                    [(ngModel)]="value6"
                    (ngModelChange)="onOk6($event)">
                    </ListItem>
                </div>
            </div>
            </div>
        </section>

    </div>
 
  <!-- <div class="oprbar"><button (click)="sumbit()" class="btn btn-lg btn-block btn-radius btn-gradient btn-shadow">开始计算</button></div> -->
  <div class="oprbar"><button (click)="sumbit()" class="btn btn-lg btn-block btn-radius btn-gradient btn-shadow">开始计算</button></div>
</div>
